<extend name="Base/common"/>

<block name="body">
        <div class="container">
            <link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/index.css">
            <div id="carousel">
                <div id="caro-imgs">
                    <!-- <img src="__PUBLIC__/Home/img/test.jpg">
                    <img src="__PUBLIC__/Home/img/test2.jpg">
                    <img src="__PUBLIC__/Home/img/test3.jpg"> -->
                    <volist name="caroImg" id="data">
                        <img src="__ROOT__{$data['img']|get_cover='path'}">
                    </volist>
                </div>
                <div id="selector" align="center"></div>
            </div>

            <!-- <hr style="margin-top:35px;" /> -->
            <div id="content">

                <div class="content-item" id="intro" >
                    
                    <label><strong>实验室简介</strong></label>
                    <div>
                        <div id="intro-img">
                            <img src="__ROOT__{$lab_img}">
                        </div>
                        <p>{$lab_brief}</p>
                        <a href="{:U('article/detail?id=3')}" class="learnMore">了解更多>></a>
                    </div>
                </div>
                <div class="content-item" id="news" >
                    <label><strong>最新动态</strong></label>
                    <p></p>
                        <ul style="padding:0px;">
                            <volist name="last_news" id="news_list">
                                <li><a href="{:U('article/lists?category='.$news_list['cat_name'])}" class="type">【{$news_list.cat_title}】</a><a href="{:U('article/detail?id='.$news_list['id'])}" class="item-title">
                               {$news_list.art_title}</a><label style="color:#aaa;margin-left:10px;">{$news_list.create_time|date="Y-m-d",###}</label></li>
                            </volist>
                        </ul>
                </div>
                <div class="content-item" id="device" >
                    <label><strong>仪器设备</strong></label>
                    <p></p>
                    <div class="device-item">
                        <a href="#"><img src="__PUBLIC__/Home/img/test.jpg"></a>
                        <div class="item-text">
                            实验设备
                            <a href="#" class="learnMore"></a>
                        </div>
                        <a href="#" class="learnMore">查看详情>></a>
                    </div>

                    <div class="device-item">
                        <a href="#"><img src="__PUBLIC__/Home/img/test.jpg"></a>
                        <div class="item-text">
                            实验设备
                            <a href="#" class="learnMore"></a>
                        </div>
                        <a href="#" class="learnMore">查看详情>></a>
                    </div>

                    <div class="device-item">
                        <a href="#"><img src="__PUBLIC__/Home/img/test.jpg"></a>
                        <div class="item-text">
                            实验设备
                            <a href="#" class="learnMore"></a>
                        </div>
                        <a href="#" class="learnMore">查看详情>></a>
                    </div>
                    
                </div>
                <div class="content-item" id="functions" >
                    <a href="{:U('Home/Device/lists')}"><div class="btn"><img src="__PUBLIC__/Home/img/Appoint.png">仪器设备预约</div></a>
                    <div class="btn"><img src="__PUBLIC__/Home/img/Manage.png">开放课题经费管理</div>
                </div>  
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                for(var i=1;i<=$("#caro-imgs img").length;i++){
                    $("#selector").append("<div class=\"selector-btn\"></div>");
                }
                var caro_img_hover=false;
                caro(); 
                $(".selector-btn").click(function(){
                    $("#caro-imgs img").css("display", "none");
                    $("#caro-imgs img").eq($(this).index()).fadeIn(500);
                    $(".selector-btn").removeClass("active");
                    $(this).addClass("active");
                });

                $("#caro-imgs").hover(function(){
                    caro_img_hover=true;
                },function(){
                    caro_img_hover=false;
                });

                function caro(){
                    var i=0;
                    $(".selector-btn").removeClass("active");
                    $(".selector-btn").eq(0).addClass("active");
                    $("#caro-imgs img").eq(0).css("display","block");
                    intervalID = setInterval(function(){
                        if(caro_img_hover==false){
                            i++;
                            if(i==$("#caro-imgs img").length) i=0;
                            $("#caro-imgs img").css("display", "none");
                            $("#caro-imgs img").eq(i).fadeIn(500);
                            $(".selector-btn").removeClass("active");
                            $(".selector-btn").eq(i).addClass("active");
                        }   
                    },3000);
                };
            });
        </script>
</block>
